:root {
    --dot-padding: 11px;
    --dot-base-size: 16px;

    /* TWEAKS */
    --reviews-offset: calc(100vw * 2);
    --projects-offset: calc(100vw * -1);
    --team-offset: calc(100vw * -3);
    --about-us-offset: calc(100vw * -2);
    --lab-offset: calc(100vw * 3);
    --services-offset: calc(100vw * 1);
}

#services .dot {
    transform: translate(var(--services-offset), 0);
}

/** HOME **/
#home #aboutdot {
    transform: translate(40px, -35px);
}

#home #labdot {
    transform: translate(-165px, 15px);
}

#home #projectsdot {
    transform: translate(50px, -100px);
}

#home #reviewsdot {
    transform: translate(-135px, -80px);
}

#home #aboutdot:hover {
    width: calc(5 * var(--dot-base-size) + var(--dot-padding));
}

#home #labdot:hover {
    width: calc(4 * var(--dot-base-size) + var(--dot-padding));
}

#home #projectsdot:hover {
    width: calc(6 * var(--dot-base-size) + var(--dot-padding));
}

#home #reviewsdot:hover {
    width: calc(6 * var(--dot-base-size) + var(--dot-padding));
}

/** REVIEWS **/
#reviews #ptmarbledot {
    transform: translate(calc(var(--reviews-offset) + 65px), 35px);
}

#reviews #mccatdot {
    transform: translate(calc(var(--reviews-offset) - 100px), 35px);
}

#reviews #onexhundreddot {
    transform: translate(calc(var(--reviews-offset) - 15px), -140px);
}

#reviews #ptmarbledot:hover {
    width: 180px;
}

#reviews #mccatdot:hover {
    width: 145px;
}

#reviews #onexhundreddot:hover {
    width: 145px;
}

/** PROJECTS **/
/* Cleaned up: 150 - 35 = 115 | -70 - 35 = -105 | 10 + 35 = 45 */
.projects #aterdot {
    transform: translate(calc(var(--projects-offset) + 115px), 0px);
}

.projects #cleandot {
    transform: translate(calc(var(--projects-offset) - 105px), -25px);
}

.projects #mockup-designdot {
    transform: translate(calc(var(--projects-offset) + 45px), -115px);
}

.projects #designifydot {
    /* transform: translate(calc(var(--projects-offset) - 45px), -50px); */
    transform: translate(calc(var(--projects-offset) - 70px), -20px);
}

.projects #aterdot:hover {
    width: 100px;
}

.projects #designifydot:hover {
    width: 110px;
}

/* .projects #cleandot:hover {
    width: 135px;
} */

.projects #mockup-designdot:hover {
    width: 270px;
}

/** TEAM **/
/* Cleaned up: -22 + 11 = -11 | 200 - 22 - 86 + 11 = 103 | -30 - 22 - 86 + 11 = -127 */
.team #alex-memberdot {
    transform: translate(calc(var(--team-offset) + 80px), 0px);
}

.team #julek-memberdot {
    transform: translate(calc(var(--team-offset) - 11px), -100px);
    display: none;
}

.team #toffee-memberdot {
    transform: translate(calc(var(--team-offset) - 127px), 0px);
}

.team #alex-memberdot:hover {
    width: 75px;
}

.team #julek-memberdot:hover {
    width: 85px;
}

.team #toffee-memberdot:hover {
    width: 90px;
}

/** ABOUT US **/
/* Cleaned up: 75 - 65 = 10 | 130 - 65 = 65 | 10 - 65 = -55 */
.about-us #socialdot {
    transform: translate(calc(var(--about-us-offset) - 65px), -40px);
    z-index: 11;
}

.about-us #toolsdot,
.about-us #mobile-toolsdot {
    transform: translate(calc(var(--about-us-offset) + 10px), -35px);
}

.about-us #processdot {
    transform: translate(calc(var(--about-us-offset) + 65px), -55px);
}

.about-us #reeldot {
    transform: translate(calc(var(--about-us-offset) + 90px), 0px);
}

.about-us #mindsetdot {
    transform: translate(calc(var(--about-us-offset) - 55px), -110px);
}

.about-us #socialdot:hover {
    width: 200px;
}

.about-us #processdot:hover {
    width: 105px;
}

.about-us #toolsdot:hover {
    width: 85px;
}

.about-us #mindsetdot:hover {
    width: 105px;
}

.about-us #reeldot:hover {
    width: 110px;
}

/** LAB **/
/* Cleaned up: 35 * 3 = 105. Apply 105 to all x-offsets */
.lab #unicorndot {
    transform: translate(calc(var(--lab-offset) - 45px), 10px);
    z-index: 11;
}

.lab #gallerydot {
    transform: translate(calc(var(--lab-offset) - 15px), 50px);
}

.lab #mockupsdot {
    transform: translate(calc(var(--lab-offset) + 110px), 20px);
}

.lab #sdfshapesdot {
    transform: translate(calc(var(--lab-offset) + 15px), 0px);
}

.lab #wallpaperdot {
    transform: translate(calc(var(--lab-offset) + 35px), -75px);
}

.lab #unicorndot:hover {
    width: 190px;
}

.lab #gallerydot:hover {
    width: 100px;
}

.lab #mockupsdot:hover {
    width: 115px;
}

.lab #sdfshapesdot:hover {
    width: 135px;
}

.lab #wallpaperdot:hover {
    width: 120px;
}

/** SERVICES */

#services #webgldot {
    transform: translate(calc(var(--services-offset) + 75px), 80px);
}

#services #blenderdot {
    transform: translate(calc(var(--services-offset) + 95px), 15px);
}

#services #devdot {
    transform: translate(calc(var(--services-offset) + -70px), -105px);
}

#services #designdot {
    transform: translate(calc(var(--services-offset) + -85px), 50px);
}

#services #webgldot:hover {
    width: 185px;
}

#services #blenderdot:hover {
    width: 100px;
}

#services #devdot:hover {
    width: 180px;
}

#services #designdot:hover {
    width: 95px;
}

/** MEDIA QUERIES **/
@media screen and (orientation: portrait) {
    :root {
        /* Standardized the multiplier and the consistent gutter additions (-11px per step) */
        --reviews-offset: calc((200vw * 2) * 0.7 + 11px);
        --projects-offset: calc((200vw * -1) * 0.7 - 22px);
        --team-offset: calc((200vw * -3) * 0.7 - 44px);
        --about-us-offset: calc((200vw * -2) * 0.7 - 33px);
        --lab-offset: calc((200vw * 3) * 0.7 + 33px);
        --services-offset: calc((200vw * 1) * 0.7 + 0px);
    }

    .lab #unicorndot {
        transform: translate(calc(var(--lab-offset) - 150px), 10px);
    }

    .reviews #onexhundreddot:hover {
        width: 110px;
    }

    #services #webgldot:hover {
        width: 100px;
    }

    #ptmarbledot:hover {
        width: 111px;
    }

    #onexhundreddot:hover {
        width: 73px;
    }

    #mccatdot:hover {
        width: 90px;
    }

    /* #aboutdot:hover,
    #labdot:hover,
    #projectsdot:hover,
    #reviewsdot:hover,
    #ptmarbledot:hover,
    #mccatdot:hover,
    #onexhundreddot:hover,
    #aterdot:hover,
    #cleandot:hover,
    #mockup-designdot:hover,
    #designifydot:hover,
    #alex-memberdot:hover,
    #julek-memberdot:hover,
    #toffee-memberdot:hover,
    #socialdot:hover,
    #toolsdot:hover,
    #mobile-toolsdot:hover,
    #processdot:hover,
    #reeldot:hover,
    #mindsetdot:hover,
    #unicorndot:hover,
    #gallerydot:hover,
    #mockupsdot:hover,
    #sdfshapesdot:hover,
    #wallpaperdot:hover,
    #webgldot:hover,
    #blenderdot:hover,
    #devdot:hover,
    #designdot:hover {
        width: auto;
        transform: none;
    }

    .dot:hover .text {
        transform: none;
        width: auto;
    } */

    .projects #mockup-designdot:hover,
    .projects #mockup-designdot {
        width: 150px;
    }

    .about-us #socialdot:hover,
    .about-us #socialdot {
        width: 95px;
    }

    .about-us #socialdot {
        transform: translate(calc(var(--about-us-offset) - 95px), -40px);
    }

    .dot .text {
        transition: none;
    }

    .dot:hover .text {
        transform: translateX(0);
        margin-left: 11px;
        left: 0px
    }
}